<template>
    <qly-base-page ref="skyBasePageRef" type="data" showBgImage refresher-bg="rgba(0,0,0,0)"
                   refresherEnabled bg-page-color="rgba(0,0,0,0)">
        <template #navbar>
            <qly-nav-bar :title="$t('common.my')" backgroundColor="rgba(0,0,0,0)"></qly-nav-bar>
        </template>
        <template #default="{dataInfo}">
            <view class="user-card" v-if="!dataInfo.id" @tap="toUserInfo">
                <view class="user-info">
                    <up-avatar :src="dataInfo.avatar" size="60"></up-avatar>
                    <view class="info">
                        <view class="name">{{ $t('common.nickname') }}：{{ dataInfo.nickname }}</view>
                        <view class="role-box">
                            <view>{{ $t('common.role') }}：司机</view>
                            <image class="change" mode="aspectFill"
                                   src="/static/images/change.png" @tap.stop="changeRoleInfo"/>
                        </view>
                        <view class="phone">{{ $t('common.mobile') }}:{{ dataInfo.mobile }}</view>
                    </view>
                </view>
            </view>
            <view class="user-card" v-else @tap="toLogin">
                <view class="user-info">
                    <up-avatar :src="dataInfo?.avatar" size="60"></up-avatar>
                    <view class="info">
                        <view class="name">{{$t('common.clickSign')}}</view>
                    </view>
                </view>
            </view>
            
            <up-card :border="false">
                <template #head>
                    <view class="title">{{ $t('common.commonFeatures') }}</view>
                </template>
                <template #body>
                    <up-cell-group>
                        <up-cell v-show="item.show" v-for="(item,index) in guideCellList" :key="index"
                                 :title="item.label" :url="item.router" isLink></up-cell>
                    </up-cell-group>
                </template>
            </up-card>
        </template>
    
    </qly-base-page>
    
<!--    切换角色-->
    <changeRole ref="changeRoleRef" />
</template>
<script setup>
import {guideCellList} from './data'
import changeRole from './components/changeRole.vue'



const changeRoleRef=ref()
const toLogin = () => {
    qly.page.open('/pages/my/login/index')
}

// 个人信息
const toUserInfo = async (e) => {
    qly.page.open('/pages/my/userInfo/index')
}

// 切换角色
const changeRoleInfo=()=>{
    changeRoleRef.value.open()
}

const toPage = async (e) => {
    qly.page.open(e.router)
}

onMounted(()=>{
    console.log('qly',qly.role.guideRole())
    console.log('qly',qly.role.driverRole())
})
</script>

<style scoped lang="scss">
.user-card {
    //background: #fff;
    padding: 32rpx 48rpx;
    
    .user-info {
        display: flex;
        align-items: center;
        gap: 18rpx;
        .info{
            .role-box{
                display: flex;
                align-items: center;
                gap: 12rpx;
                .change{
                    width: 50rpx;
                    height: 50rpx;
                }
            }
        }
    }
}

.money-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12rpx;
    background-color: #fff;
    padding: 0 32rpx 32rpx;
    
    .grid-item {
        text-align: center;
        
        .money {
            font-weight: bold;
            font-size: 32rpx;
            color: #303133;
            margin-bottom: 8rpx;
        }
        
        .title {
            font-size: 28rpx;
            color: #303133;
        }
    }
}

.more-box {
    display: flex;
    align-items: center;
    gap: 8rpx;
    
    .text {
        font-size: 28rpx;
        color: #909193;
    }
}

:deep(.u-card__body){
    padding: 0 !important;
}

.title{
    font-weight: bold;
}
</style>
